<template>
  <div>
    <div class="logo">
      <i class="el-icon-arrow-left" @click="logo"></i>
    </div>
    <div class="box">
      <div class="box_zuo">
        <p>会场名</p>
        <p>开始时间</p>
        <p>自动取消</p>
        <p>状态</p>
      </div>
      <div class="box_you">
        <div><input type="text" v-model="name" /></div>
        <div>
          <input type="date" v-model="date" />
        </div>
        <div class="date">
          <input type="text" class="xia" placeholder="120" v-model="kill" />
          <p class="red">
            抢购成功,不付款多少秒后,自动取消资格,默认120秒(2分钟)
          </p>
        </div>
        <div class="cz">
          <input
            type="radio"
            checked="checked"
            name="as"
            ref="radio"
            @click="radio1()"
          />
          <span class="qi">开启</span>
          <input type="radio" name="as" ref="radio"
            @click="radio2()"/>
          <span>关闭</span>
        </div>
      </div>
    </div>
    <div class="caoz">
      <button class="yes" @click="yes">确定</button>
      <button class="no" @click="logo">取消</button>
    </div>
  </div>
</template>

<script>
import { zqhzqhkilladd } from '../../api/index'
export default {
  data() {
    return {
      name: '',
      date: '',
      kill: '',
      as: true,
    }
  },
  methods: {
    // 返回上页面
    logo() {
      this.$router.push('/seckill')
    },
    // 确定
    yes() {
      if(this.name!=''&&this.date!=''){
        let a = this.as ? '开启' : '关闭'
      zqhzqhkilladd({
        name: this.name,
        date: this.date,
        number: 20,
        status: a,
        datetext: `${this.date}00:00`,
      }).then((res) => {
        console.log(res)
        if(res.code==200){
            this.$notify({
            title: '成功',
            message: '修改成功马上跳转',
            type: 'success',
          })
          setTimeout(()=>{
            this.$router.push('/seckill')
          },1000)
        }
      })
      }else{
        this.$notify({
          title: '警告',
          message: '请选择要添加的信息',
          type: 'warning'
        });
      }
    },
    radio1(e) {
      this.as = true
    },
    radio2(e) {
      this.as = false
    },
  },
}
</script>

<style lang="scss" scoped>
.logo {
  height: 50px;
  font-size: 30px;
  margin: 50px 0 0 50px;
}
.box {
  width: 500px;
  display: flex;
  margin: 30px 0 0 50px;
}
.box_zuo {
  width: 100px;
  height: 1005;
  p {
    margin-bottom: 60px;
    font-weight: bold;
  }
}
.xia {
  margin: 15px 0 10px 0;
}
.box_you {
  div {
    margin-bottom: 54px;
  }
}
.red {
  font-size: 12px;
  color: red;
}
.qi {
  margin-right: 50px;
}
.yes {
  width: 80px;
  height: 30px;
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid rgba(187, 187, 187, 1);
  background-color: rgba(7, 144, 245, 1);
  margin-right: 50px;
}
.caoz {
  width: 300px;
  margin-left: 100px;
}
.no {
  width: 80px;
  height: 30px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid rgba(187, 187, 187, 1);
}
.cz {
  margin-top: -20px;
}
</style>
